<template>
  <view class="content">
    <head-box></head-box>
    <view class="navbar"
      ><strong></strong>
      <scroll-view class="_main-scroll-view-fixed" scroll-x="true">
        <view
          v-for="(item, index) in navList"
          :key="index"
          class="_scroll-view-item"
          :class="{ current: tabCurrentIndex === index }"
          @click="tabClick(index)"
          >{{ item.text }}</view
        >
      </scroll-view>
    </view>

    <view>
      <swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
        <swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
          <scroll-view
              class="list-scroll-content tab-botton"
              scroll-y="true"
              style="height: 100%"
              @scrolltolower="loadmore"
          >
            <!-- 列表 -->
            <classVideo :list="tabItem.orderList"
                        :isVideoLink="false"
                        :showId="showId"
            @showVideo="showVideo"
            @linkVideo="onLinkVideo"
            @getPlayVideo="getPlayVideo"
            ></classVideo>

            <u-loadmore :status="status" :icon-type="iconType" @loadmore="loadmore" />
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
    <tabs-box></tabs-box>
  </view>
</template>

<script>
  import {gpTagList,gpUserVideoOperateTimes,addUserVideoOperateTimes } from '@/api/video'
  import {gettRunResourcesBaseList } from '@/api/training'
  import classVideo from '@/components/classVideo'
  import {addPlayVideoCb} from '@/common/type'
  export default {
    components:{
      classVideo
    },
    data() {
      return {
        showId: null,//展示视频id
        tabCurrentIndex: 0,//当前tab的第几项
        isChanged: false,
        pageNo:1,//第几页
        pageSize:10,//每页条数
        status: 'loadmore', //加载的状态
        iconType: 'flower', //加载图标样式
        isLoading: false, //是否要加载数据
        navList: [],//导航标签和下拉数据
        allvideolist: [],
      }
    },
    onLoad(options) {
      this.gpTagList(options)
    },
    onUnload() {
    },
    onShow(){
      // #ifdef H5
      console.log('分享')
      this.$wxSetShare()
      // #endif
    },
    computed:{

    },
    methods: {
      loadmore(){
        if( this.status !== 'nomore'){
          this.pageNo++
          this.gpVideoList()
        }

      },
      onRetSet(){
        this.pageNo = 1
        this.status = 'loading'
        this.isLoading = false
        const navItem = this.navList[this.tabCurrentIndex]
        navItem.orderList = []
      },
      //获取视频标签列表
      gpTagList({state:status}){
        const params = {
          pageNo:1,
          pageSize:10,
          column: 'sorting', order: 'desc'
        }
        gpTagList (params).then((res) => {
          const {code,result:{records:list}} = res
          if(code===200){
            list.map(item=>{
              const {index:state,id:tagIds,tagName:text,tagCode} = item
              this.navList.push({
                state,tagIds,text,
                loadingType:'more',
                page:0,
                tagCode,
                orderList: [],
              })
            })
            this.tabCurrentIndex = +status
            this.gpVideoList()
          }
        }).catch(e=>{
          console.log(e)
        })
      },
      //获取用户视频点赞
      gpUserVideoOperateTimes1(ele,dzTimes=0){
        this.allvideolist.push({
          id: ele.id,
          videoName: ele.videoName,
          createTime: ele.createTime,
          videoPic: this.$api.getImgUrl(ele.icon),
          videoUrl: this.$api.getImgUrl(ele.url),
          dzTimes
        })
      },
      //视频分类
      async gpVideoList(){
        //这里是将订单挂载到tab列表下
        const index = this.tabCurrentIndex
        const navItem = this.navList[index]

        if (this.isLoading) {
          return
        }
        this.isLoading = true
        this.status = 'loading'
        const params = {
          pageNo:this.pageNo,
          pageSize:this.pageSize,
          type:5,
          sorting:navItem&&navItem.tagCode,
          courseType:navItem&&navItem.tagCode,
          deleted:'0',
        }
        gettRunResourcesBaseList(params).then(res=>{
          const {code,result:{records:list}}= res
          if (code===200) {
            this.isLoading = false
            uni.hideLoading()
            if (!list.length) {
              this.status = 'nomore'
            }else {
              this.status = 'loadmore'
              list.forEach((ele) => {
                if (uni.getStorageSync('token')) {
                  gpUserVideoOperateTimes({ videoId: ele.id }).then((res) => {
                    const {code,result:{dzTimes}} = res
                    if (code) {
                      this.gpUserVideoOperateTimes1(ele,dzTimes)
                    } else {
                      this.gpUserVideoOperateTimes1(ele)
                    }
                  })
                } else {
                  this.gpUserVideoOperateTimes1(ele)
                }
              })
              navItem.orderList =[...navItem.orderList,...list]
            }

          }else {
            this.status = 'nomore'
          }
        }).catch(e=>{
          console.log(e)
        })
      },
      //swiper 切换
      changeTab(e) {
        this.tabCurrentIndex = e.target.current
        this.onRetSet()
        this.gpVideoList()
      },
      //顶部tab点击
      tabClick(index) {
        this.tabCurrentIndex = index
      },
      //视频点赞
      onLinkVideo(item) {
        if (!uni.getStorageSync('token')) {
          this.$api.msg('登陆后才能点赞')
          return
        }
        const params = { category: '2', videoId: item.id }
        addUserVideoOperateTimes(params).then(res=>{
          const {code,}= res
          if(code===200){
            item.dzTimes = 1
            this.$api.msg('点赞成功')
          }
        }).catch(e=>{})
      },
      //视频 信息
      showVideo(showId) {
        this.showId = showId

      },
      //播放视频
      getPlayVideo(e) {
        const _this = this
        addPlayVideoCb(addUserVideoOperateTimes,e)
        const currentId = e.currentTarget.id // 获取当前视频id
        this.videoContent = uni.createVideoContext(currentId, _this).play()

        // 获取视频列表
        const trailer = _this.allvideolist

        trailer.forEach((item, index) => {
          // 获取json对象并遍历, 停止非当前视频
          console.log(item.id)
          if (item.videoUrl != null && item.videoUrl != '') {
            const temp = 'video' + item.id
            if (temp != currentId) {
              // 暂停其余视频
              uni.createVideoContext(temp, _this).pause() //暂停视频播放事件
            }
          }
        })
      },
    },
    //加载到底部进行请求新的数据
    onReachBottom() {
      if (this.status === 'loadmore') {
        this.loadmore()
      }
    },
  }
</script>

<style lang="scss">
  page,
  .content {
    background: $page-color-base;
    height: 100%;
  }
  ._main-scroll-view-fixed {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;

    box-sizing: border-box;
    padding: 0 20rpx;
    z-index: 9;
    background-color: #fff;
    ._scroll-view-item {
      font-size: 28rpx;
      display: inline-block;
      width: 25%;
      color: #999;
      text-align: center;
      line-height: 80rpx;
      ._text {
        border-bottom: 5rpx solid rgba(255, 255, 255, 0);
        padding-bottom: 10rpx;
      }
    }
    .current {
      color: #4e8bfc;
      ._text {
        border-bottom: 5rpx solid #4e8bfc;
        padding-bottom: 10rpx;
      }
    }
  }
  .tab-content {
    padding: 15rpx 0;
  }
  .swiper-box {
    height: calc(100vh - 160rpx);
  }
  .list-scroll-content {
  }

  .navbar {
    display: flex;
    height: 40px;
    padding: 0 5px;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
    position: relative;
    z-index: 10;
    .nav-item {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      font-size: 15px;
      color: $font-color-dark;
      position: relative;
      &.current {
        color: $base-color;
        &:after {
          content: '';
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          width: 44px;
          height: 0;
          border-bottom: 2px solid $base-color;
        }
      }
    }
  }

  .uni-swiper-item {
    height: auto;
  }


  /* load-more */
  .uni-load-more {
    display: flex;
    flex-direction: row;
    height: 80upx;
    align-items: center;
    justify-content: center;
  }

  .uni-load-more__text {
    font-size: 28upx;
    color: #999;
  }

  .uni-load-more__img {
    height: 24px;
    width: 24px;
    margin-right: 10px;
  }

  .uni-load-more__img > view {
    position: absolute;
  }

  .uni-load-more__img > view view {
    width: 6px;
    height: 2px;
    border-top-left-radius: 1px;
    border-bottom-left-radius: 1px;
    background: #999;
    position: absolute;
    opacity: 0.2;
    transform-origin: 50%;
    animation: load 1.56s ease infinite;
  }

  .uni-load-more__img > view view:nth-child(1) {
    transform: rotate(90deg);
    top: 2px;
    left: 9px;
  }

  .uni-load-more__img > view view:nth-child(2) {
    transform: rotate(180deg);
    top: 11px;
    right: 0;
  }

  .uni-load-more__img > view view:nth-child(3) {
    transform: rotate(270deg);
    bottom: 2px;
    left: 9px;
  }

  .uni-load-more__img > view view:nth-child(4) {
    top: 11px;
    left: 0;
  }

  .load1,
  .load2,
  .load3 {
    height: 24px;
    width: 24px;
  }

  .load2 {
    transform: rotate(30deg);
  }

  .load3 {
    transform: rotate(60deg);
  }

  .load1 view:nth-child(1) {
    animation-delay: 0s;
  }

  .load2 view:nth-child(1) {
    animation-delay: 0.13s;
  }

  .load3 view:nth-child(1) {
    animation-delay: 0.26s;
  }

  .load1 view:nth-child(2) {
    animation-delay: 0.39s;
  }

  .load2 view:nth-child(2) {
    animation-delay: 0.52s;
  }

  .load3 view:nth-child(2) {
    animation-delay: 0.65s;
  }

  .load1 view:nth-child(3) {
    animation-delay: 0.78s;
  }

  .load2 view:nth-child(3) {
    animation-delay: 0.91s;
  }

  .load3 view:nth-child(3) {
    animation-delay: 1.04s;
  }

  .load1 view:nth-child(4) {
    animation-delay: 1.17s;
  }

  .load2 view:nth-child(4) {
    animation-delay: 1.3s;
  }

  .load3 view:nth-child(4) {
    animation-delay: 1.43s;
  }

  @-webkit-keyframes load {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0.2;
    }
  }
  .m-l {
    margin-left: 20upx;
  }
</style>
